<template>
  <div class="memo-container">
    <div class="memo">
      <div class="mark"></div>
      <div class="memo-heading">
        <h5 class="title">{{ memo.title }}</h5>
        <ul class="tools">
          <li class="edit"
              @click="showEdit"></li>
          <li class="delete"
              @click="doDel"></li>
        </ul>
      </div>
      <h6 class="memo-info">
        <span class="timeStamp">{{ memo.createTime }}</span>
        <span class="category">分类: {{ $store.state.actHelp.getCategoryName(memo.categoryId) }}</span>
      </h6>
      <div class="content">
        <div class="text">{{ memo.content }}</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">

    import {Component, Prop, Vue} from "vue-property-decorator";
    import ItemDetail from "@/model/ItemDetail";

    @Component
    export default class MemoItem extends Vue {
        @Prop() memo!: ItemDetail

        showEdit(): void {
            // 1. 首先要先拿到要编辑的数据,但是要
            //    确保修改的数据不是直接修改localStorage中的数据，
            //    可以使用深拷贝或者这里的转换操作
            let newMemo = JSON.parse(JSON.stringify(this.memo))
            // 2. 重新为编辑的数据赋值
            this.$store.commit('showEditMemo', newMemo)
        }//

        doDel(): void {
            if (!confirm(`确认要删除${this.memo.title}，这篇笔记吗？`)) return
            this.$store.state.actHelp.remove(this.memo.id)
        }
    }
</script>

<style scoped>

</style>
